<template>
  <div>
    <div class="tabbar">
      <div class="left">
        <div>
          <img
            src="https://y.qq.com/mediastyle/yqq/img/logo.png?max_age=2592000"
            alt=""
          />
        </div>
        <ul class="hengzhe">
          <li>音乐馆</li>
          <li>我的音乐</li>
          <li>客户端</li>
          <li>开放平台</li>
          <li>VIP</li>
        </ul>
      </div>
      <div class="right">
        <div>
          <input
            type="text"
            class="search_input__input"
            placeholder="搜索音乐、MV、歌单、用户"
            value=""
          />
        </div>
        <div class="luse">
          <el-dropdown>
            <el-button type="primary">
              开通VIP<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>开通绿钻豪华版</el-dropdown-item>
              <el-dropdown-item>开通付费包</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="baise">
          <el-dropdown>
            <el-button type="primary">
              充值<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>购买乐币</el-dropdown-item>
              <el-dropdown-item>充值饭票</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
    <div class="title">
      <router-link to="/" tag="span">首页</router-link>
      <router-link to="/" tag="span">歌手</router-link>
      <router-link to="/" tag="span">排行榜</router-link>
      <router-link to="/" tag="span">分类歌单</router-link>
      <router-link to="/" tag="span">电台</router-link>
      <router-link to="/mv" tag="span">MV</router-link>
      <router-link to="/count" tag="span">数字专辑</router-link>
      <router-link to="/" tag="span">票务</router-link>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style lang="less" scoped>
.tabbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .hengzhe {
    margin: 0 24px;
    li {
      padding: 10px;
    }
  }
}
.left {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right {
  display: flex;
  justify-content: space-between;
  align-items: center;
  div {
    margin: 0 10px;
    input {
      width: 220px;
      height: 38px;
    }
  }
}

.hengzhe {
  display: flex;
}
.title {
  width: 800px;
  height: 51px;
  line-height: 51px;
  border-top: 1px solid #f2f2f2;
  padding-left: 400px;
  margin-right: -50px;
  display: flex;
  justify-content: space-around;
  span {
    float: left;
    font-size: 15px;
    color: #000;
    margin-right: 47 px;
  }
}

.luse {
  /deep/ .el-button--primary {
    background-color: #31c27c;
    color: #fff;
    border-color: #31c27c;
  }
}
.baise {
  /deep/ .el-button--primary {
    background: transparent;
    color: #000;
    border: 1px solid #c9c9c9;
    border-radius: 3px;
  }
}
</style>